<template>
    <div class="box">
        <h3 class="title">{{ imgInfo.title }}</h3>
        <p class="info">
            <span>发表时间:{{  imgInfo.add_time | formatDate }}</span>
            <span>点击：{{  imgInfo.click }} 次</span>
        </p>
        <hr>
        <div class="content" v-html="imgInfo.content"></div>
        <hr>
        <comment :newsid="id"></comment>
    </div>
</template>

<script>
import comment from '../sub-component/comment.vue'
export default {
    data(){
        return {
            imgInfo:{}
        }
    },
    created(){
        this.imageInfo()
    },
    methods:{
        async imageInfo(){
            let { data } = await this.$http.get('/api/getImageInfo?id='+this.id);
            // console.log(data);
            if (data.status==0) {
                this.imgInfo = data.message[0]
            }
        }
    },
    props:["id"],
    components:{
        comment
    }
}
</script>

<style lang="less" scoped>
    .box {
        margin-bottom: 50px;
        .title {
            text-align: center;
        }
        .info {
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
        }
        .content {
            text-indent: 2em;
        }
    }
</style>